import React, { useState } from 'react'
import '../styles/login.css'
import AuthCode from './AuthCode'
import Face from './Face'
import { ConfigProvider, } from 'antd';
import { Tabs, Radio } from 'antd';
export default function Login() {
    const [curKey, setCurKey] = useState(1)
    const [isRadioChecked, setIsRadioChecked] = useState(false);
    const onChange = (key) => {
        setCurKey(key)
    };
    const items = [
        {
            key: '1',
            label: '短信验证',
        },
        {
            key: '2',
            label: '人脸识别',
        },
    ];


    // 处理Radio选中状态
    const handleRadioChange = (e) => {
        setIsRadioChecked(e.target.checked);
    };
    return (
        <div>
            <div className="login-box">
                <div className='login-logo'>
                    <img src="logo.png" alt="" />
                    <p>登录页面</p>
                </div>
                <div className="tab-box">
                    <ConfigProvider
                        theme={{
                            components: {

                            },
                        }}
                    >
                        <Tabs defaultActiveKey="1" items={items} onChange={onChange}
                            centered size='large' tabBarGutter={100}
                        />
                    </ConfigProvider>
                </div>

                {curKey == 1 ? <AuthCode isRadioChecked={isRadioChecked}></AuthCode> : <Face isRadioChecked={isRadioChecked}></Face>}

                <footer>
                    <Radio onChange={handleRadioChange}><span className='content'>我已阅读用户隐私政策</span></Radio>
                </footer>
            </div>
        </div>
    )
}
